"use client"

import { useState, useEffect } from "react"
import { useParams, useRouter } from "next/navigation"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import { Progress } from "@/components/ui/progress"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { 
  FileText, 
  GitBranch, 
  GitMerge, 
  CheckSquare, 
  FolderOpen, 
  MessageSquare,
  Edit,
  Settings,
  ArrowLeft,
  Users,
  Calendar,
  Target,
  Shield,
  Zap,
  Upload,
  Download,
  Plus,
  History,
  Network,
  Activity,
  ArrowRight,
  AlertTriangle,
  CheckCircle,
  Clock,
  User,
  Building,
  File,
  Image,
  FileText as FileIcon,
  Archive,
  HardDrive,
  Cpu,
  Thermometer,
  Zap as ZapIcon,
  Shield as ShieldIcon
} from "lucide-react"
import { cn } from "@/lib/utils"
import FlowOperation from "@/components/FlowOperation"

interface Project {
  _id: string
  PROJECT_CODE: string
  model: string
  PROJECT_TYPE_NAME: string
  PROJECT_DESC: string
  PROJECT_PLAN_START_DATE: string
  PROJECT_PLAN_END_DATE: string
  status: number
  statusDesc: string
  fullStatusDesc: string
  developmentStatus: string
  completionPercentage: number
  progressColor: string
  WORK_TEMP: string
  CERTIFICATION: string
  LOW_POWER: string
  STARTUP_TIME: string
  CONFORMAL_COATING: string
  RATED_VOLTAGE: string
  MAX_POWER: string
  MAX_SPEED: string
  POLE_PAIRS: string
  HAS_HALL: string
  CONTROL_MODE: string
  CONTROL_ALGORITHM: string
  STALL_PROTECTION: string
  OVERVOLTAGE_PROTECTION: string
  UNDERVOLTAGE_PROTECTION: string
  TEMPERATURE_PROTECTION: string
  OVERCURRENT_PROTECTION: string
  CURRENT_LIMIT_PROTECTION: string
  BLOCKAGE_PROTECTION: string
  PHASE_PROTECTION: string
  STALL_HOLD_TIME: string
  STALL_RESTART_TIME: string
  STALL_RESTART_COUNT: string
  OVERVOLTAGE_VALUE: string
  OVERVOLTAGE_RECOVERY_VALUE: string
  UNDERVOLTAGE_VALUE: string
  UNDERVOLTAGE_RECOVERY_VALUE: string
  protectionTemp: string
  recoveryTemp: string
  overcurrentValue: string
  currentLimitValue: string
  blockageDiameter: string
  blockageHoldTime: string
  customerName: string
  salespersonName: string
  requirements: string
  controlDetails: string[]
}

interface Branch {
  _id: string
  name: string
  isMain: boolean
  isActive: boolean
  createTime: string
  creatorName: string
  level: number
  createTimeFormatted: string
}

interface FlowHistory {
  _id: string
  fromStatus: string
  toStatus: string
  createTime: string
  operator: string
  note: string
  type: string
}

interface ResourceFile {
  _id: string
  name: string
  type: string
  size: string
  createTime: string
  updateTime: string
  url: string
  version: string
}

interface ResourceFolder {
  id: string
  name: string
  files: ResourceFile[]
  active?: boolean
}

interface Task {
  _id: string
  title: string
  description: string
  status: string
  priority: string
  assignee: string
  dueDate: string
  createTime: string
}

interface Feedback {
  _id: string
  content: string
  type: string
  status: string
  creator: string
  createTime: string
  replies: Feedback[]
}

export default function ProjectDetailPage() {
  const params = useParams()
  const router = useRouter()
  const projectId = params.id as string
  
  const [project, setProject] = useState<Project | null>(null)
  const [branches, setBranches] = useState<Branch[]>([])
  const [currentBranch, setCurrentBranch] = useState<Branch | null>(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState<string | null>(null)
  const [activeTab, setActiveTab] = useState("overview")
  
  // 流转操作处理函数
  const handleFlowSubmit = async (data: { transitionId: string; note: string; description: string; attachments: File[] }) => {
    try {
      const formData = new FormData()
      formData.append('transitionId', data.transitionId)
      formData.append('note', data.note)
      formData.append('description', data.description)
      
      // 添加附件
      data.attachments.forEach((file, index) => {
        formData.append(`files`, file)
      })
      
      const response = await fetch(`/api/projects/${projectId}/flow`, {
        method: 'POST',
        body: formData
      })
      
      if (!response.ok) {
        const errorData = await response.json()
        throw new Error(errorData.error || '流转操作失败')
      }
      
      const result = await response.json()
      
      // 刷新项目数据
      await loadProjectData()
      
      // 显示成功消息
      alert('流转操作成功！')
      
    } catch (error) {
      console.error('流转操作失败:', error)
      alert(error instanceof Error ? error.message : '流转操作失败')
    }
  }
  
  // 新增状态
  const [flowHistory, setFlowHistory] = useState<FlowHistory[]>([])
  const [resourceFolders, setResourceFolders] = useState<ResourceFolder[]>([
    { id: 'package', name: '包装指引', files: [] },
    { id: 'process', name: '加工指引', files: [] },
    { id: 'material', name: '物料变更通知', files: [] },
    { id: 'bom', name: 'BOM', files: [] },
    { id: 'report', name: '认证报告', files: [] },
    { id: 'test_report', name: '测试报告', files: [] },
    { id: 'test_guide', name: '测试指引', files: [] },
    { id: 'spec', name: '产品规格书', files: [] },
    { id: 'code', name: '代码', files: [] },
    { id: 'firmware', name: '烧录文件', files: [] },
    { id: 'structure', name: '结构', files: [] },
    { id: 'customer', name: '客户文件', files: [] },
    { id: 'component', name: '元器件规格书', files: [] },
    { id: 'schematic', name: '原理图', files: [] },
    { id: 'pcb', name: 'PCB', files: [] },
    { id: 'manual', name: '作业指导书', files: [], active: true }
  ])
  const [selectedFolderId, setSelectedFolderId] = useState('manual')
  const [tasks, setTasks] = useState<Task[]>([])
  const [feedbacks, setFeedbacks] = useState<Feedback[]>([])
  const [branchGraph, setBranchGraph] = useState<{nodes: Branch[], edges: any[]}>({nodes: [], edges: []})

  useEffect(() => {
    if (projectId) {
      loadProjectData()
    }
  }, [projectId])

  const loadProjectData = async () => {
    try {
      setLoading(true)
      setError(null)
      
      // 加载项目详情
      const response = await fetch(`/api/projects/${projectId}`)
      if (!response.ok) {
        throw new Error('项目加载失败')
      }
      const projectData = await response.json()
      setProject(projectData)
      
      // 并行加载其他数据
      const [branchesResponse, flowHistoryResponse, tasksResponse, feedbacksResponse] = await Promise.all([
        fetch(`/api/projects/${projectId}/branches`),
        fetch(`/api/projects/${projectId}/histories`),
        fetch(`/api/projects/${projectId}/tasks`),
        fetch(`/api/projects/${projectId}/feedback`)
      ])
      
      if (branchesResponse.ok) {
        const branchesData = await branchesResponse.json()
        setBranches(branchesData)
        // 设置当前分支为默认主分支
        const mainBranch = branchesData.find((b: Branch) => b.isMain) || branchesData[0]
        setCurrentBranch(mainBranch)
        
        // 构建分支图谱
        const branchNodes = branchesData.map((branch: Branch) => ({
          ...branch,
          level: branch.isMain ? 0 : 1,
          createTimeFormatted: new Date(branch.createTime).toLocaleDateString('zh-CN')
        }))
        setBranchGraph({ nodes: branchNodes, edges: [] })
      }
      
      if (flowHistoryResponse.ok) {
        const flowHistoryData = await flowHistoryResponse.json()
        setFlowHistory(flowHistoryData.map((item: any) => ({
          ...item,
          createTime: new Date(item.createTime).toLocaleString('zh-CN')
        })))
      }
      
      if (tasksResponse.ok) {
        const tasksData = await tasksResponse.json()
        setTasks(tasksData)
      }
      
      if (feedbacksResponse.ok) {
        const feedbacksData = await feedbacksResponse.json()
        setFeedbacks(feedbacksData)
      }
      
      // 加载资源数据
      loadResourceData()
      
    } catch (err) {
      console.error('加载项目数据失败:', err)
      setError(err instanceof Error ? err.message : '加载失败')
    } finally {
      setLoading(false)
    }
  }
  
  const loadResourceData = async () => {
    try {
      const response = await fetch(`/api/projects/${projectId}/resources`)
      if (response.ok) {
        const resources = await response.json()
        // 按文件夹分组资源
        const updatedFolders = resourceFolders.map(folder => ({
          ...folder,
          files: resources.filter((r: any) => r.type === folder.id).map((r: any) => ({
            ...r,
            createTime: new Date(r.createTime).toLocaleDateString('zh-CN'),
            updateTime: new Date(r.updateTime).toLocaleDateString('zh-CN')
          }))
        }))
        setResourceFolders(updatedFolders)
      }
    } catch (err) {
      console.error('加载资源数据失败:', err)
    }
  }

  const handleBranchChange = (branchId: string) => {
    const branch = branches.find(b => b._id === branchId)
    if (branch) {
      setCurrentBranch(branch)
    }
  }
  
  const handleFolderChange = (folderId: string) => {
    setSelectedFolderId(folderId)
  }
  
  const getStatusColor = (status: string) => {
    switch (status) {
      case '开发中': return 'bg-blue-500'
      case '已完成': return 'bg-green-500'
      case '测试中': return 'bg-yellow-500'
      case '设计中': return 'bg-purple-500'
      default: return 'bg-gray-500'
    }
  }
  
  const getProjectTypeColor = (type: string) => {
    switch (type) {
      case '风机': return 'bg-green-500'
      case '霍尔': return 'bg-blue-500'
      case '磁编': return 'bg-purple-500'
      case '吸尘器': return 'bg-red-500'
      case '泵': return 'bg-cyan-500'
      default: return 'bg-gray-500'
    }
  }
  
  const getTaskStatusColor = (status: string) => {
    switch (status) {
      case '待处理': return 'bg-gray-100 text-gray-800'
      case '进行中': return 'bg-blue-100 text-blue-800'
      case '已完成': return 'bg-green-100 text-green-800'
      case '已延期': return 'bg-red-100 text-red-800'
      default: return 'bg-gray-100 text-gray-800'
    }
  }
  
  const getTaskPriorityColor = (priority: string) => {
    switch (priority) {
      case '高': return 'bg-red-100 text-red-800'
      case '中': return 'bg-yellow-100 text-yellow-800'
      case '低': return 'bg-green-100 text-green-800'
      default: return 'bg-gray-100 text-gray-800'
    }
  }
  
  const getFileIcon = (fileName: string) => {
    const extension = fileName.split('.').pop()?.toLowerCase()
    switch (extension) {
      case 'pdf': return <File className="h-8 w-8 text-red-500" />
      case 'doc':
      case 'docx': return <FileText className="h-8 w-8 text-blue-500" />
      case 'xls':
      case 'xlsx': return <File className="h-8 w-8 text-green-500" />
      case 'jpg':
      case 'jpeg':
      case 'png':
      case 'gif': return <Image className="h-8 w-8 text-purple-500" />
      case 'zip':
      case 'rar': return <Archive className="h-8 w-8 text-orange-500" />
      default: return <FileIcon className="h-8 w-8 text-gray-500" />
    }
  }
  
  const formatFileSize = (bytes: string) => {
    const size = parseInt(bytes)
    if (size < 1024) return size + ' B'
    if (size < 1024 * 1024) return (size / 1024).toFixed(1) + ' KB'
    return (size / (1024 * 1024)).toFixed(1) + ' MB'
  }

  if (loading) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
          <p className="text-gray-600">加载项目中...</p>
        </div>
      </div>
    )
  }

  if (error || !project) {
    return (
      <div className="flex items-center justify-center min-h-screen">
        <Card className="w-full max-w-md">
          <CardContent className="pt-6 text-center">
            <div className="text-6xl mb-4">❌</div>
            <h3 className="text-lg font-semibold mb-2">项目加载失败</h3>
            <p className="text-gray-600 mb-4">{error || '项目不存在或已被删除'}</p>
            <Button onClick={() => router.back()}>
              <ArrowLeft className="mr-2 h-4 w-4" />
              返回
            </Button>
          </CardContent>
        </Card>
      </div>
    )
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* 项目头部 */}
      <div className="bg-white shadow-sm border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
          <div className="flex items-center justify-between mb-4">
            <div className="flex items-center space-x-4">
              <Button variant="ghost" size="sm" onClick={() => router.back()}>
                <ArrowLeft className="h-4 w-4" />
              </Button>
              <div>
                <h1 className="text-2xl font-bold text-gray-900">{project.model || '未命名项目'}</h1>
                <div className="flex items-center space-x-2 mt-1">
                  <Badge className={getProjectTypeColor(project.PROJECT_TYPE_NAME)}>
                    {project.PROJECT_TYPE_NAME || '未分类'}
                  </Badge>
                  <Badge variant="outline">
                    {project.PROJECT_CODE || '无编号'}
                  </Badge>
                </div>
              </div>
            </div>
            <div className="flex items-center space-x-2">
              <Button variant="outline" size="sm" onClick={() => router.push(`/projects/${projectId}/protection`)}>
                <Shield className="h-4 w-4 mr-2" />
                保护设置
              </Button>
              <Button variant="outline" size="sm">
                <Edit className="h-4 w-4 mr-2" />
                编辑
              </Button>
              <Button variant="outline" size="sm">
                <Settings className="h-4 w-4 mr-2" />
                设置
              </Button>
            </div>
          </div>
          
          {/* 状态信息 */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="flex items-center space-x-3">
              <div className="flex-shrink-0">
                <Target className="h-5 w-5 text-gray-400" />
              </div>
              <div>
                <p className="text-sm text-gray-500">项目状态</p>
                <div className="flex items-center space-x-2">
                  <span className="font-medium">{project.fullStatusDesc || project.statusDesc || '未知状态'}</span>
                  <Badge className={getStatusColor(project.developmentStatus)}>
                    {project.developmentStatus || '未知'}
                  </Badge>
                </div>
              </div>
            </div>
            
            <div className="flex items-center space-x-3">
              <div className="flex-shrink-0">
                <Calendar className="h-5 w-5 text-gray-400" />
              </div>
              <div>
                <p className="text-sm text-gray-500">完成进度</p>
                <div className="flex items-center space-x-2">
                  <Progress value={project.completionPercentage || 0} className="flex-1" />
                  <span className="text-sm font-medium">{project.completionPercentage || 0}%</span>
                </div>
              </div>
            </div>
            
            <div className="flex items-center space-x-3">
              <div className="flex-shrink-0">
                <GitBranch className="h-5 w-5 text-gray-400" />
              </div>
              <div>
                <p className="text-sm text-gray-500">当前分支</p>
                <select 
                  value={currentBranch?._id || ''} 
                  onChange={(e) => handleBranchChange(e.target.value)}
                  className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"
                >
                  {branches.map(branch => (
                    <option key={branch._id} value={branch._id}>
                      {branch.name} {branch.isMain ? '(主分支)' : ''}
                    </option>
                  ))}
                </select>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 主要内容 */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <Tabs value={activeTab} onValueChange={setActiveTab} className="space-y-6">
          <TabsList className="grid w-full grid-cols-6">
            <TabsTrigger value="graph" className="flex items-center space-x-2">
              <Network className="h-4 w-4" />
              <span>图谱</span>
            </TabsTrigger>
            <TabsTrigger value="overview" className="flex items-center space-x-2">
              <FileText className="h-4 w-4" />
              <span>总览</span>
            </TabsTrigger>
            <TabsTrigger value="workflow" className="flex items-center space-x-2">
              <GitBranch className="h-4 w-4" />
              <span>流转</span>
            </TabsTrigger>
            <TabsTrigger value="tasks" className="flex items-center space-x-2">
              <CheckSquare className="h-4 w-4" />
              <span>任务</span>
            </TabsTrigger>
            <TabsTrigger value="resources" className="flex items-center space-x-2">
              <FolderOpen className="h-4 w-4" />
              <span>资料</span>
            </TabsTrigger>
            <TabsTrigger value="feedback" className="flex items-center space-x-2">
              <MessageSquare className="h-4 w-4" />
              <span>反馈</span>
            </TabsTrigger>
          </TabsList>

          {/* 图谱标签页 */}
          <TabsContent value="graph" className="space-y-6">
            <Card>
              <CardHeader>
                <CardTitle className="flex items-center space-x-2">
                  <Network className="h-5 w-5" />
                  <span>项目状态流转图谱</span>
                </CardTitle>
              </CardHeader>
              <CardContent>
                <div className="space-y-6">
                  {/* 流转历史时间线 */}
                  <div className="space-y-4">
                    <h3 className="text-lg font-semibold">状态流转历史</h3>
                    {flowHistory.length > 0 ? (
                      <div className="space-y-4">
                        {flowHistory
                          .filter(history => history.type === 'status_change')
                          .sort((a, b) => new Date(a.createTime).getTime() - new Date(b.createTime).getTime())
                          .map((history, index) => (
                            <div key={history._id} className="flex items-start space-x-4">
                              {/* 时间线连接线 */}
                              <div className="flex flex-col items-center">
                                <div className="w-4 h-4 rounded-full border-2 bg-green-500 border-green-500" />
                                {index < flowHistory.filter(h => h.type === 'status_change').length - 1 && (
                                  <div className="w-0.5 h-16 bg-gray-300 mt-2" />
                                )}
                              </div>

                              {/* 流转记录 */}
                              <Card className="flex-1">
                                <CardHeader className="pb-3">
                                  <div className="flex items-center justify-between">
                                    <div className="flex items-center space-x-2">
                                      <GitMerge className="h-5 w-5 text-green-600" />
                                      <CardTitle className="text-base">
                                        {history.fromStatus} → {history.toStatus}
                                      </CardTitle>
                                      <Badge className="bg-green-100 text-green-800">
                                        状态变更
                                      </Badge>
                                    </div>
                                    <div className="text-sm text-gray-500">
                                      {history.createTime}
                                    </div>
                                  </div>
                                </CardHeader>
                                <CardContent className="pt-0">
                                  {history.note && (
                                    <p className="text-sm text-gray-600 mb-3">{history.note}</p>
                                  )}
                                  
                                  <div className="flex items-center space-x-2 text-sm">
                                    <Badge variant="outline" className="text-xs">
                                      {history.fromStatus}
                                    </Badge>
                                    <ArrowRight className="h-3 w-3 text-gray-400" />
                                    <Badge variant="outline" className="text-xs">
                                      {history.toStatus}
                                    </Badge>
                                  </div>
                                  
                                  {history.operator && (
                                    <div className="flex items-center space-x-2 mt-2 text-xs text-gray-500">
                                      <User className="h-3 w-3" />
                                      <span>操作人: {history.operator}</span>
                                    </div>
                                  )}
                                </CardContent>
                              </Card>
                            </div>
                          ))}
                      </div>
                    ) : (
                      <div className="text-center py-8 text-gray-500">
                        <GitMerge className="h-12 w-12 mx-auto mb-4 text-gray-400" />
                        <p>暂无状态流转记录</p>
                      </div>
                    )}
                  </div>

                  {/* 当前状态卡片 */}
                  <Card className="border-blue-500 bg-blue-50">
                    <CardHeader>
                      <CardTitle className="flex items-center space-x-2 text-blue-900">
                        <CheckCircle className="h-5 w-5" />
                        <span>当前项目状态</span>
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="flex items-center justify-between">
                        <div>
                          <div className="text-2xl font-bold text-blue-900 mb-2">
                            {project?.statusDesc || '未知状态'}
                          </div>
                          <p className="text-blue-700">项目当前处于此状态，可以执行相应的流转操作</p>
                        </div>
                        <Badge className="bg-blue-500 text-white px-4 py-2">
                          当前状态
                        </Badge>
                      </div>
                    </CardContent>
                  </Card>

                  {/* 状态流转图示 */}
                  <Card>
                    <CardHeader>
                      <CardTitle className="flex items-center space-x-2">
                        <GitBranch className="h-5 w-5" />
                        <span>状态流转图</span>
                      </CardTitle>
                    </CardHeader>
                    <CardContent>
                      <div className="bg-gray-50 p-6 rounded-lg">
                        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                          {/* 项目审核状态 */}
                          <div className="space-y-3">
                            <h3 className="font-semibold text-gray-800 border-b pb-2">项目审核</h3>
                            <div className="space-y-2">
                              <div className="flex items-center space-x-2">
                                <div className="w-3 h-3 bg-yellow-500 rounded-full"></div>
                                <span className="text-sm">董事长审核</span>
                              </div>
                              <div className="flex items-center space-x-2">
                                <div className="w-3 h-3 bg-blue-500 rounded-full"></div>
                                <span className="text-sm">研发经理审核</span>
                              </div>
                              <div className="flex items-center space-x-2">
                                <div className="w-3 h-3 bg-green-500 rounded-full"></div>
                                <span className="text-sm">分配任务</span>
                              </div>
                            </div>
                          </div>
                          
                          {/* 活动状态 */}
                          <div className="space-y-3">
                            <h3 className="font-semibold text-gray-800 border-b pb-2">活动状态</h3>
                            <div className="space-y-2">
                              <div className="flex items-center space-x-2">
                                <div className="w-3 h-3 bg-purple-500 rounded-full"></div>
                                <span className="text-sm">硬件确认</span>
                              </div>
                              <div className="flex items-center space-x-2">
                                <div className="w-3 h-3 bg-indigo-500 rounded-full"></div>
                                <span className="text-sm">硬件设计</span>
                              </div>
                              <div className="flex items-center space-x-2">
                                <div className="w-3 h-3 bg-cyan-500 rounded-full"></div>
                                <span className="text-sm">调试</span>
                              </div>
                              <div className="flex items-center space-x-2">
                                <div className="w-3 h-3 bg-orange-500 rounded-full"></div>
                                <span className="text-sm">测试</span>
                              </div>
                              <div className="flex items-center space-x-2">
                                <div className="w-3 h-3 bg-pink-500 rounded-full"></div>
                                <span className="text-sm">客户验证</span>
                              </div>
                            </div>
                          </div>
                          
                          {/* 生产状态 */}
                          <div className="space-y-3">
                            <h3 className="font-semibold text-gray-800 border-b pb-2">生产状态</h3>
                            <div className="space-y-2">
                              <div className="flex items-center space-x-2">
                                <div className="w-3 h-3 bg-teal-500 rounded-full"></div>
                                <span className="text-sm">订单准备</span>
                              </div>
                              <div className="flex items-center space-x-2">
                                <div className="w-3 h-3 bg-red-500 rounded-full"></div>
                                <span className="text-sm">生产中</span>
                              </div>
                              <div className="flex items-center space-x-2">
                                <div className="w-3 h-3 bg-gray-500 rounded-full"></div>
                                <span className="text-sm">休眠</span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              </CardContent>
            </Card>
          </TabsContent>

          {/* 总览标签页 */}
          <TabsContent value="overview" className="space-y-6">
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
              {/* 基础信息 */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <FileText className="h-5 w-5" />
                    <span>基础信息</span>
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="text-sm font-medium text-gray-500">项目编号</label>
                      <p className="mt-1 text-sm text-gray-900">{project.PROJECT_CODE || '无'}</p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-gray-500">项目类型</label>
                      <p className="mt-1 text-sm text-gray-900">{project.PROJECT_TYPE_NAME || '未分类'}</p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-gray-500">客户名称</label>
                      <p className="mt-1 text-sm text-gray-900">{project.customerName || '未设置'}</p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-gray-500">业务员</label>
                      <p className="mt-1 text-sm text-gray-900">{project.salespersonName || '未设置'}</p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-gray-500">开始时间</label>
                      <p className="mt-1 text-sm text-gray-900">{project.PROJECT_PLAN_START_DATE || '未设置'}</p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-gray-500">截止时间</label>
                      <p className="mt-1 text-sm text-gray-900">{project.PROJECT_PLAN_END_DATE || '未设置'}</p>
                    </div>
                  </div>
                  <div>
                    <label className="text-sm font-medium text-gray-500">项目描述</label>
                    <p className="mt-1 text-sm text-gray-900">{project.PROJECT_DESC || '无描述信息'}</p>
                  </div>
                  <div>
                    <label className="text-sm font-medium text-gray-500">需求描述</label>
                    <p className="mt-1 text-sm text-gray-900">{project.requirements || '无需求信息'}</p>
                  </div>
                </CardContent>
              </Card>

              {/* 基本参数 */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <Settings className="h-5 w-5" />
                    <span>基本参数</span>
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="text-sm font-medium text-gray-500">工作环境温度</label>
                      <p className="mt-1 text-sm text-gray-900">{project.WORK_TEMP || '未设置'}°C</p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-gray-500">认证要求</label>
                      <p className="mt-1 text-sm text-gray-900">{project.CERTIFICATION || '无'}</p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-gray-500">低功耗要求</label>
                      <p className="mt-1 text-sm text-gray-900">{project.LOW_POWER || '未设置'}μA</p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-gray-500">启动时间</label>
                      <p className="mt-1 text-sm text-gray-900">{project.STARTUP_TIME || '未设置'}s</p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-gray-500">三防漆要求</label>
                      <p className="mt-1 text-sm text-gray-900">{project.CONFORMAL_COATING || '无'}</p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-gray-500">额定电压</label>
                      <p className="mt-1 text-sm text-gray-900">{project.RATED_VOLTAGE || '未设置'}V</p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-gray-500">最大功率</label>
                      <p className="mt-1 text-sm text-gray-900">{project.MAX_POWER || '未设置'}W</p>
                    </div>
                    <div>
                      <label className="text-sm font-medium text-gray-500">最高转速</label>
                      <p className="mt-1 text-sm text-gray-900">{project.MAX_SPEED || '未设置'}RPM</p>
                    </div>
                  </div>
                </CardContent>
              </Card>

              {/* 控制详细描述 */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <Settings className="h-5 w-5" />
                    <span>控制详细描述</span>
                  </CardTitle>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    {(project.controlDescription1 || project.controlDescription2 || project.controlDescription3 || project.controlDescription4) ? (
                      <>
                        {project.controlDescription1 && (
                          <div>
                            <label className="text-sm font-medium text-gray-500">描述 1</label>
                            <p className="mt-1 text-sm text-gray-900">{project.controlDescription1}</p>
                          </div>
                        )}
                        {project.controlDescription2 && (
                          <div>
                            <label className="text-sm font-medium text-gray-500">描述 2</label>
                            <p className="mt-1 text-sm text-gray-900">{project.controlDescription2}</p>
                          </div>
                        )}
                        {project.controlDescription3 && (
                          <div>
                            <label className="text-sm font-medium text-gray-500">描述 3</label>
                            <p className="mt-1 text-sm text-gray-900">{project.controlDescription3}</p>
                          </div>
                        )}
                        {project.controlDescription4 && (
                          <div>
                            <label className="text-sm font-medium text-gray-500">描述 4</label>
                            <p className="mt-1 text-sm text-gray-900">{project.controlDescription4}</p>
                          </div>
                        )}
                      </>
                    ) : (
                      <div className="col-span-2">
                        <p className="text-sm text-gray-500">暂无控制详细描述</p>
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>
            </div>

            {/* 电机参数 */}
            {(project.motorType || project.motorPower || project.motorVoltage || project.motorCurrent || 
              project.ratedSpeed || project.ratedTorque || project.polePairs || project.phases) && (
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <Settings className="h-5 w-5" />
                    <span>电机参数</span>
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                    {project.motorType && (
                      <div>
                        <label className="text-sm font-medium text-gray-500">电机类型</label>
                        <p className="mt-1 text-sm text-gray-900">{project.motorType}</p>
                      </div>
                    )}
                    {project.motorPower && (
                      <div>
                        <label className="text-sm font-medium text-gray-500">电机功率</label>
                        <p className="mt-1 text-sm text-gray-900">{project.motorPower}W</p>
                      </div>
                    )}
                    {project.motorVoltage && (
                      <div>
                        <label className="text-sm font-medium text-gray-500">电机电压</label>
                        <p className="mt-1 text-sm text-gray-900">{project.motorVoltage}V</p>
                      </div>
                    )}
                    {project.motorCurrent && (
                      <div>
                        <label className="text-sm font-medium text-gray-500">电机电流</label>
                        <p className="mt-1 text-sm text-gray-900">{project.motorCurrent}A</p>
                      </div>
                    )}
                    {project.ratedSpeed && (
                      <div>
                        <label className="text-sm font-medium text-gray-500">额定转速</label>
                        <p className="mt-1 text-sm text-gray-900">{project.ratedSpeed}rpm</p>
                      </div>
                    )}
                    {project.ratedTorque && (
                      <div>
                        <label className="text-sm font-medium text-gray-500">额定扭矩</label>
                        <p className="mt-1 text-sm text-gray-900">{project.ratedTorque}Nm</p>
                      </div>
                    )}
                    {project.polePairs && (
                      <div>
                        <label className="text-sm font-medium text-gray-500">极对数</label>
                        <p className="mt-1 text-sm text-gray-900">{project.polePairs}</p>
                      </div>
                    )}
                    {project.phases && (
                      <div>
                        <label className="text-sm font-medium text-gray-500">相数</label>
                        <p className="mt-1 text-sm text-gray-900">{project.phases}相</p>
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>
            )}

            {/* 保护参数 */}
            {(project.STALL_PROTECTION || project.OVERVOLTAGE_PROTECTION || project.UNDERVOLTAGE_PROTECTION || 
              project.TEMPERATURE_PROTECTION || project.OVERCURRENT_PROTECTION || project.CURRENT_LIMIT_PROTECTION || 
              project.BLOCKAGE_PROTECTION || project.PHASE_PROTECTION) && (
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <Shield className="h-5 w-5" />
                    <span>保护参数</span>
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                    {/* 堵转保护 */}
                    {project.STALL_PROTECTION && (
                      <div className="space-y-2">
                        <label className="text-sm font-medium text-gray-500 flex items-center">
                          <Zap className="h-4 w-4 mr-1" />
                          堵转保护
                        </label>
                        <p className="text-sm text-gray-900">{project.STALL_PROTECTION}</p>
                        {project.STALL_PROTECTION !== '无' && (
                          <div className="ml-4 space-y-1 text-xs text-gray-600">
                            {project.STALL_HOLD_TIME && (
                              <p>保持时间: {project.STALL_HOLD_TIME}S</p>
                            )}
                            {project.STALL_RESTART_TIME && (
                              <p>重启时间: {project.STALL_RESTART_TIME}S</p>
                            )}
                            {project.STALL_RESTART_COUNT && (
                              <p>重启次数: {project.STALL_RESTART_COUNT}次</p>
                            )}
                          </div>
                        )}
                      </div>
                    )}

                    {/* 过压保护 */}
                    {project.OVERVOLTAGE_PROTECTION && (
                      <div className="space-y-2">
                        <label className="text-sm font-medium text-gray-500 flex items-center">
                          <Zap className="h-4 w-4 mr-1" />
                          过压保护
                        </label>
                        <p className="text-sm text-gray-900">{project.OVERVOLTAGE_PROTECTION}</p>
                        {project.OVERVOLTAGE_PROTECTION !== '无' && (
                          <div className="ml-4 space-y-1 text-xs text-gray-600">
                            {project.OVERVOLTAGE_VALUE && (
                              <p>保护值: {project.OVERVOLTAGE_VALUE}V</p>
                            )}
                            {project.OVERVOLTAGE_RECOVERY_VALUE && (
                              <p>恢复值: {project.OVERVOLTAGE_RECOVERY_VALUE}V</p>
                            )}
                          </div>
                        )}
                      </div>
                    )}

                    {/* 欠压保护 */}
                    {project.UNDERVOLTAGE_PROTECTION && (
                      <div className="space-y-2">
                        <label className="text-sm font-medium text-gray-500 flex items-center">
                          <Zap className="h-4 w-4 mr-1" />
                          欠压保护
                        </label>
                        <p className="text-sm text-gray-900">{project.UNDERVOLTAGE_PROTECTION}</p>
                        {project.UNDERVOLTAGE_PROTECTION !== '无' && (
                          <div className="ml-4 space-y-1 text-xs text-gray-600">
                            {project.UNDERVOLTAGE_VALUE && (
                              <p>保护值: {project.UNDERVOLTAGE_VALUE}V</p>
                            )}
                            {project.UNDERVOLTAGE_RECOVERY_VALUE && (
                              <p>恢复值: {project.UNDERVOLTAGE_RECOVERY_VALUE}V</p>
                            )}
                          </div>
                        )}
                      </div>
                    )}

                    {/* 温度保护 */}
                    {project.TEMPERATURE_PROTECTION && (
                      <div className="space-y-2">
                        <label className="text-sm font-medium text-gray-500 flex items-center">
                          <Zap className="h-4 w-4 mr-1" />
                          温度保护
                        </label>
                        <p className="text-sm text-gray-900">{project.TEMPERATURE_PROTECTION}</p>
                        {project.TEMPERATURE_PROTECTION !== '无' && (
                          <div className="ml-4 space-y-1 text-xs text-gray-600">
                            {project.protectionTemp && (
                              <p>保护温度: {project.protectionTemp}°C</p>
                            )}
                            {project.recoveryTemp && (
                              <p>恢复温度: {project.recoveryTemp}°C</p>
                            )}
                          </div>
                        )}
                      </div>
                    )}

                    {/* 过流保护 */}
                    {project.OVERCURRENT_PROTECTION && (
                      <div className="space-y-2">
                        <label className="text-sm font-medium text-gray-500 flex items-center">
                          <Zap className="h-4 w-4 mr-1" />
                          过流保护
                        </label>
                        <p className="text-sm text-gray-900">{project.OVERCURRENT_PROTECTION}</p>
                        {project.OVERCURRENT_PROTECTION !== '无' && project.overcurrentValue && (
                          <div className="ml-4 space-y-1 text-xs text-gray-600">
                            <p>保护值: {project.overcurrentValue}A</p>
                          </div>
                        )}
                      </div>
                    )}

                    {/* 其他保护 */}
                    {(project.CURRENT_LIMIT_PROTECTION || project.BLOCKAGE_PROTECTION || project.PHASE_PROTECTION) && (
                      <div className="space-y-2">
                        <label className="text-sm font-medium text-gray-500 flex items-center">
                          <Shield className="h-4 w-4 mr-1" />
                          其他保护
                        </label>
                        <div className="space-y-1 text-xs text-gray-600">
                          {project.CURRENT_LIMIT_PROTECTION && (
                            <p>限流保护: {project.CURRENT_LIMIT_PROTECTION}</p>
                          )}
                          {project.BLOCKAGE_PROTECTION && (
                            <p>堵孔保护: {project.BLOCKAGE_PROTECTION}</p>
                          )}
                          {project.PHASE_PROTECTION && (
                            <p>缺相保护: {project.PHASE_PROTECTION}</p>
                          )}
                        </div>
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>
            )}
          </TabsContent>

          {/* 流转标签页 */}
          <TabsContent value="workflow">
            <div className="space-y-6">
              {/* 状态机图示 */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <GitMerge className="h-5 w-5" />
                    <span>项目状态流转</span>
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="bg-gray-50 p-6 rounded-lg">
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                      {/* 项目审核状态 */}
                      <div className="space-y-3">
                        <h3 className="font-semibold text-gray-800 border-b pb-2">项目审核</h3>
                        <div className="space-y-2">
                          <div className="flex items-center space-x-2">
                            <div className="w-3 h-3 bg-yellow-500 rounded-full"></div>
                            <span className="text-sm">董事长审核</span>
                          </div>
                          <div className="flex items-center space-x-2">
                            <div className="w-3 h-3 bg-blue-500 rounded-full"></div>
                            <span className="text-sm">研发经理审核</span>
                          </div>
                          <div className="flex items-center space-x-2">
                            <div className="w-3 h-3 bg-green-500 rounded-full"></div>
                            <span className="text-sm">分配任务</span>
                          </div>
                        </div>
                      </div>
                      
                      {/* 活动状态 */}
                      <div className="space-y-3">
                        <h3 className="font-semibold text-gray-800 border-b pb-2">活动状态</h3>
                        <div className="space-y-2">
                          <div className="flex items-center space-x-2">
                            <div className="w-3 h-3 bg-purple-500 rounded-full"></div>
                            <span className="text-sm">硬件确认</span>
                          </div>
                          <div className="flex items-center space-x-2">
                            <div className="w-3 h-3 bg-indigo-500 rounded-full"></div>
                            <span className="text-sm">硬件设计</span>
                          </div>
                          <div className="flex items-center space-x-2">
                            <div className="w-3 h-3 bg-cyan-500 rounded-full"></div>
                            <span className="text-sm">调试</span>
                          </div>
                          <div className="flex items-center space-x-2">
                            <div className="w-3 h-3 bg-orange-500 rounded-full"></div>
                            <span className="text-sm">测试</span>
                          </div>
                          <div className="flex items-center space-x-2">
                            <div className="w-3 h-3 bg-pink-500 rounded-full"></div>
                            <span className="text-sm">客户验证</span>
                          </div>
                        </div>
                      </div>
                      
                      {/* 生产状态 */}
                      <div className="space-y-3">
                        <h3 className="font-semibold text-gray-800 border-b pb-2">生产状态</h3>
                        <div className="space-y-2">
                          <div className="flex items-center space-x-2">
                            <div className="w-3 h-3 bg-teal-500 rounded-full"></div>
                            <span className="text-sm">订单准备</span>
                          </div>
                          <div className="flex items-center space-x-2">
                            <div className="w-3 h-3 bg-red-500 rounded-full"></div>
                            <span className="text-sm">生产中</span>
                          </div>
                          <div className="flex items-center space-x-2">
                            <div className="w-3 h-3 bg-gray-500 rounded-full"></div>
                            <span className="text-sm">休眠</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>

              {/* 流转操作 */}
              <FlowOperation 
                projectId={projectId}
                currentStatus={project?.statusDesc || '未知状态'}
                onFlowSubmit={handleFlowSubmit}
              />

              {/* 状态流转详情 */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <GitBranch className="h-5 w-5" />
                    <span>状态流转详情</span>
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-6">
                    {/* 项目审核阶段 */}
                    <div className="border rounded-lg p-4">
                      <h3 className="font-semibold text-gray-800 mb-3 flex items-center">
                        <div className="w-3 h-3 bg-yellow-500 rounded-full mr-2"></div>
                        项目审核阶段
                      </h3>
                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                        <div>
                          <span className="font-medium text-gray-600">董事长审核：</span>
                          <p className="text-gray-500 mt-1">审核立项请求，决定项目是否启动</p>
                        </div>
                        <div>
                          <span className="font-medium text-gray-600">研发经理审核：</span>
                          <p className="text-gray-500 mt-1">审核技术可行性，分配资源</p>
                        </div>
                        <div>
                          <span className="font-medium text-gray-600">任务分配：</span>
                          <p className="text-gray-500 mt-1">分配硬件/软件工程师，制定时间计划</p>
                        </div>
                      </div>
                    </div>

                    {/* 活动阶段 */}
                    <div className="border rounded-lg p-4">
                      <h3 className="font-semibold text-gray-800 mb-3 flex items-center">
                        <div className="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
                        活动阶段
                      </h3>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                          <h4 className="font-medium text-gray-700 mb-2">硬件流程</h4>
                          <div className="space-y-2 text-sm">
                            <div className="flex items-center space-x-2">
                              <div className="w-2 h-2 bg-purple-500 rounded-full"></div>
                              <span>硬件确认 - 确认是否已有现成硬件</span>
                            </div>
                            <div className="flex items-center space-x-2">
                              <div className="w-2 h-2 bg-indigo-500 rounded-full"></div>
                              <span>设计 - 提交原理图、PCB、BOM等</span>
                            </div>
                            <div className="flex items-center space-x-2">
                              <div className="w-2 h-2 bg-blue-500 rounded-full"></div>
                              <span>打样 - 采购打样，制作样品</span>
                            </div>
                            <div className="flex items-center space-x-2">
                              <div className="w-2 h-2 bg-green-500 rounded-full"></div>
                              <span>在库 - 样品入库，准备调试</span>
                            </div>
                          </div>
                        </div>
                        <div>
                          <h4 className="font-medium text-gray-700 mb-2">软件流程</h4>
                          <div className="space-y-2 text-sm">
                            <div className="flex items-center space-x-2">
                              <div className="w-2 h-2 bg-cyan-500 rounded-full"></div>
                              <span>调试 - 软件调试，功能验证</span>
                            </div>
                            <div className="flex items-center space-x-2">
                              <div className="w-2 h-2 bg-orange-500 rounded-full"></div>
                              <span>测试 - 功能测试，性能验证</span>
                            </div>
                            <div className="flex items-center space-x-2">
                              <div className="w-2 h-2 bg-pink-500 rounded-full"></div>
                              <span>客户验证 - 客户确认样品</span>
                            </div>
                            <div className="flex items-center space-x-2">
                              <div className="w-2 h-2 bg-teal-500 rounded-full"></div>
                              <span>订单准备 - 准备量产资料</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    {/* 生产阶段 */}
                    <div className="border rounded-lg p-4">
                      <h3 className="font-semibold text-gray-800 mb-3 flex items-center">
                        <div className="w-3 h-3 bg-red-500 rounded-full mr-2"></div>
                        生产阶段
                      </h3>
                      <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                        <div>
                          <span className="font-medium text-gray-600">生产中：</span>
                          <p className="text-gray-500 mt-1">按照样品进行批量生产</p>
                        </div>
                        <div>
                          <span className="font-medium text-gray-600">问题处理：</span>
                          <p className="text-gray-500 mt-1">PE处理生产问题，研发排查设计问题</p>
                        </div>
                        <div>
                          <span className="font-medium text-gray-600">完成归档：</span>
                          <p className="text-gray-500 mt-1">生产完成，项目归档</p>
                        </div>
                      </div>
                    </div>

                    {/* 特殊状态 */}
                    <div className="border rounded-lg p-4">
                      <h3 className="font-semibold text-gray-800 mb-3 flex items-center">
                        <div className="w-3 h-3 bg-gray-500 rounded-full mr-2"></div>
                        特殊状态
                      </h3>
                      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                        <div>
                          <span className="font-medium text-gray-600">休眠状态：</span>
                          <p className="text-gray-500 mt-1">项目暂停，可重新激活或归档</p>
                        </div>
                        <div>
                          <span className="font-medium text-gray-600">待反馈状态：</span>
                          <p className="text-gray-500 mt-1">处理功能问题，等待反馈</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </CardContent>
              </Card>

              {/* 流转历史记录 */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <History className="h-5 w-5" />
                    <span>流转历史</span>
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {flowHistory.length > 0 ? (
                      flowHistory.map((history) => (
                        <div key={history._id} className="flex items-start space-x-4 p-4 border-l-4 border-blue-500 bg-blue-50 rounded-r-lg">
                          <div className="flex-shrink-0">
                            <div className="w-3 h-3 bg-blue-500 rounded-full"></div>
                          </div>
                          <div className="flex-1">
                            <div className="flex items-center justify-between">
                              <div className="font-medium text-blue-900">
                                {history.type === 'status_change' ? '状态变更' : 
                                 history.type === 'task_complete' ? '任务完成' :
                                 history.type === 'branch_create' ? '分支创建' :
                                 history.type === 'project_create' ? '项目创建' :
                                 history.type === 'review_pass' ? '审核通过' :
                                 history.type === 'review_reject' ? '审核不通过' :
                                 history.type === 'assign_task' ? '分配任务' : '其他操作'}
                                {history.fromStatus && history.toStatus && `: ${history.fromStatus} → ${history.toStatus}`}
                              </div>
                              <div className="text-sm text-blue-700">{history.createTime}</div>
                            </div>
                            <div className="text-sm text-blue-700 mt-1">
                              操作人: {history.operator}
                            </div>
                            {history.note && (
                              <div className="text-sm text-gray-600 mt-2 bg-white p-2 rounded">
                                备注: {history.note}
                              </div>
                            )}
                          </div>
                        </div>
                      ))
                    ) : (
                      <div className="text-center py-8">
                        <History className="h-12 w-12 mx-auto mb-4 text-gray-400" />
                        <p className="text-gray-500">暂无流转记录</p>
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          {/* 任务标签页 */}
          <TabsContent value="tasks">
            <div className="space-y-6">
              {/* 任务统计 */}
              <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                <Card>
                  <CardContent className="pt-6">
                    <div className="text-center">
                      <div className="text-2xl font-bold text-blue-600">{tasks.length}</div>
                      <div className="text-sm text-gray-500">总任务数</div>
                    </div>
                  </CardContent>
                </Card>
                <Card>
                  <CardContent className="pt-6">
                    <div className="text-center">
                      <div className="text-2xl font-bold text-yellow-600">
                        {tasks.filter(t => t.status === '进行中').length}
                      </div>
                      <div className="text-sm text-gray-500">进行中</div>
                    </div>
                  </CardContent>
                </Card>
                <Card>
                  <CardContent className="pt-6">
                    <div className="text-center">
                      <div className="text-2xl font-bold text-green-600">
                        {tasks.filter(t => t.status === '已完成').length}
                      </div>
                      <div className="text-sm text-gray-500">已完成</div>
                    </div>
                  </CardContent>
                </Card>
                <Card>
                  <CardContent className="pt-6">
                    <div className="text-center">
                      <div className="text-2xl font-bold text-red-600">
                        {tasks.filter(t => t.status === '已延期').length}
                      </div>
                      <div className="text-sm text-gray-500">已延期</div>
                    </div>
                  </CardContent>
                </Card>
              </div>
              
              {/* 任务列表 */}
              <Card>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <CardTitle className="flex items-center space-x-2">
                      <CheckSquare className="h-5 w-5" />
                      <span>任务列表</span>
                    </CardTitle>
                    <Button onClick={() => router.push(`/projects/${projectId}/tasks`)}>
                      <Plus className="h-4 w-4 mr-2" />
                      新建任务
                    </Button>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {tasks.length > 0 ? (
                      tasks.map((task) => (
                        <div key={task._id} className="flex items-center justify-between p-4 border rounded-lg">
                          <div className="flex items-center space-x-4">
                            <div className="flex-shrink-0">
                              <CheckSquare className="h-5 w-5 text-gray-400" />
                            </div>
                            <div>
                              <div className="font-medium">{task.title}</div>
                              <div className="text-sm text-gray-500">{task.description}</div>
                              <div className="flex items-center space-x-2 mt-1">
                                <Badge className={getTaskStatusColor(task.status)}>
                                  {task.status}
                                </Badge>
                                <Badge className={getTaskPriorityColor(task.priority)}>
                                  {task.priority}
                                </Badge>
                                <span className="text-xs text-gray-500">
                                  截止: {new Date(task.dueDate).toLocaleDateString()}
                                </span>
                              </div>
                            </div>
                          </div>
                          <div className="text-right">
                            <div className="text-sm text-gray-500">负责人: {task.assignee}</div>
                            <div className="text-xs text-gray-400">
                              创建: {new Date(task.createTime).toLocaleDateString()}
                            </div>
                          </div>
                        </div>
                      ))
                    ) : (
                      <div className="text-center py-8">
                        <CheckSquare className="h-12 w-12 mx-auto mb-4 text-gray-400" />
                        <p className="text-gray-500 mb-4">暂无任务</p>
                        <Button onClick={() => router.push(`/projects/${projectId}/tasks`)}>
                          <Plus className="h-4 w-4 mr-2" />
                          创建第一个任务
                        </Button>
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          {/* 资料标签页 */}
          <TabsContent value="resources">
            <div className="space-y-6">
              {/* 资料类型选择器 */}
              <Card>
                <CardContent className="pt-6">
                  <div className="flex items-center justify-between">
                    <div className="flex items-center space-x-4">
                      <FolderOpen className="h-5 w-5 text-gray-400" />
                      <span className="font-medium">资料类型</span>
                    </div>
                    <div className="flex items-center space-x-2">
                      <Select value={selectedFolderId} onValueChange={handleFolderChange}>
                        <SelectTrigger className="w-48">
                          <SelectValue />
                        </SelectTrigger>
                        <SelectContent>
                          {resourceFolders.map((folder) => (
                            <SelectItem key={folder.id} value={folder.id}>
                              {folder.name}
                            </SelectItem>
                          ))}
                        </SelectContent>
                      </Select>
                      <Button variant="outline" size="sm">
                        <Upload className="h-4 w-4 mr-2" />
                        上传
                      </Button>
                      <Button variant="outline" size="sm">
                        <Download className="h-4 w-4 mr-2" />
                        批量下载
                      </Button>
                    </div>
                  </div>
                </CardContent>
              </Card>
              
              {/* 资料列表 */}
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center space-x-2">
                    <FolderOpen className="h-5 w-5" />
                    <span>
                      {resourceFolders.find(f => f.id === selectedFolderId)?.name || '资料'}
                    </span>
                    <Badge className="bg-blue-100 text-blue-800">
                      {resourceFolders.find(f => f.id === selectedFolderId)?.files.length || 0} 个文件
                    </Badge>
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {resourceFolders.find(f => f.id === selectedFolderId)?.files.length ? (
                      resourceFolders
                        .find(f => f.id === selectedFolderId)
                        ?.files.map((file) => (
                          <div key={file._id} className="flex items-center justify-between p-4 border rounded-lg">
                            <div className="flex items-center space-x-4">
                              <div className="flex-shrink-0">
                                {getFileIcon(file.name)}
                              </div>
                              <div>
                                <div className="font-medium">{file.name}</div>
                                <div className="flex items-center space-x-4 text-sm text-gray-500">
                                  <span>版本: {file.version}</span>
                                  <span>大小: {formatFileSize(file.size)}</span>
                                  <span>更新: {file.updateTime}</span>
                                </div>
                              </div>
                            </div>
                            <div className="flex items-center space-x-2">
                              <Button variant="ghost" size="sm">
                                <Download className="h-4 w-4" />
                              </Button>
                              <Button variant="ghost" size="sm">
                                <FileText className="h-4 w-4" />
                              </Button>
                            </div>
                          </div>
                        ))
                    ) : (
                      <div className="text-center py-8">
                        <FolderOpen className="h-12 w-12 mx-auto mb-4 text-gray-400" />
                        <p className="text-gray-500 mb-4">此文件夹暂无文件</p>
                        <Button>
                          <Upload className="h-4 w-4 mr-2" />
                          上传文件
                        </Button>
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>

          {/* 反馈标签页 */}
          <TabsContent value="feedback">
            <div className="space-y-6">
              {/* 反馈统计 */}
              <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                <Card>
                  <CardContent className="pt-6">
                    <div className="text-center">
                      <div className="text-2xl font-bold text-blue-600">{feedbacks.length}</div>
                      <div className="text-sm text-gray-500">总反馈数</div>
                    </div>
                  </CardContent>
                </Card>
                <Card>
                  <CardContent className="pt-6">
                    <div className="text-center">
                      <div className="text-2xl font-bold text-yellow-600">
                        {feedbacks.filter(f => f.status === '待处理').length}
                      </div>
                      <div className="text-sm text-gray-500">待处理</div>
                    </div>
                  </CardContent>
                </Card>
                <Card>
                  <CardContent className="pt-6">
                    <div className="text-center">
                      <div className="text-2xl font-bold text-green-600">
                        {feedbacks.filter(f => f.status === '已解决').length}
                      </div>
                      <div className="text-sm text-gray-500">已解决</div>
                    </div>
                  </CardContent>
                </Card>
                <Card>
                  <CardContent className="pt-6">
                    <div className="text-center">
                      <div className="text-2xl font-bold text-purple-600">
                        {feedbacks.filter(f => f.type === '建议').length}
                      </div>
                      <div className="text-sm text-gray-500">建议</div>
                    </div>
                  </CardContent>
                </Card>
              </div>
              
              {/* 反馈列表 */}
              <Card>
                <CardHeader>
                  <div className="flex items-center justify-between">
                    <CardTitle className="flex items-center space-x-2">
                      <MessageSquare className="h-5 w-5" />
                      <span>反馈列表</span>
                    </CardTitle>
                    <Button>
                      <Plus className="h-4 w-4 mr-2" />
                      新建反馈
                    </Button>
                  </div>
                </CardHeader>
                <CardContent>
                  <div className="space-y-4">
                    {feedbacks.length > 0 ? (
                      feedbacks.map((feedback) => (
                        <div key={feedback._id} className="p-4 border rounded-lg">
                          <div className="flex items-start justify-between mb-2">
                            <div className="flex items-center space-x-2">
                              <Badge className={
                                feedback.type === '问题' ? 'bg-red-100 text-red-800' :
                                feedback.type === '建议' ? 'bg-blue-100 text-blue-800' :
                                feedback.type === '缺陷' ? 'bg-orange-100 text-orange-800' :
                                'bg-gray-100 text-gray-800'
                              }>
                                {feedback.type}
                              </Badge>
                              <Badge className={
                                feedback.status === '待处理' ? 'bg-yellow-100 text-yellow-800' :
                                feedback.status === '处理中' ? 'bg-blue-100 text-blue-800' :
                                feedback.status === '已解决' ? 'bg-green-100 text-green-800' :
                                'bg-gray-100 text-gray-800'
                              }>
                                {feedback.status}
                              </Badge>
                            </div>
                            <div className="text-sm text-gray-500">
                              {new Date(feedback.createTime).toLocaleDateString()}
                            </div>
                          </div>
                          <div className="mb-3">
                            <p className="text-gray-900">{feedback.content}</p>
                          </div>
                          <div className="flex items-center justify-between text-sm text-gray-500">
                            <span>反馈人: {feedback.creator}</span>
                            <div className="flex items-center space-x-2">
                              <Button variant="ghost" size="sm">
                                回复
                              </Button>
                              <Button variant="ghost" size="sm">
                                处理
                              </Button>
                            </div>
                          </div>
                          {feedback.replies && feedback.replies.length > 0 && (
                            <div className="mt-3 pt-3 border-t">
                              <div className="text-sm font-medium text-gray-700 mb-2">
                                回复 ({feedback.replies.length})
                              </div>
                              <div className="space-y-2">
                                {feedback.replies.map((reply, index) => (
                                  <div key={index} className="text-sm text-gray-600 bg-gray-50 p-2 rounded">
                                    <span className="font-medium">{reply.creator}:</span> {reply.content}
                                  </div>
                                ))}
                              </div>
                            </div>
                          )}
                        </div>
                      ))
                    ) : (
                      <div className="text-center py-8">
                        <MessageSquare className="h-12 w-12 mx-auto mb-4 text-gray-400" />
                        <p className="text-gray-500 mb-4">暂无反馈</p>
                        <Button>
                          <Plus className="h-4 w-4 mr-2" />
                          提交第一个反馈
                        </Button>
                      </div>
                    )}
                  </div>
                </CardContent>
              </Card>
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </div>
  )
}